<template>
  <flexbox class="wk-upload-cell">
    <img :src="fileIcon" class="wk-upload-cell__header">
    <div class="wk-upload-cell__body">
      <div class="text-one-line">
        {{ file.name }}
        <span style="color: #999;">{{ fileSizeLocal }}</span>
      </div>
      <el-progress :stroke-width="3" :show-text="false"
                   :percentage="complete ? 100 : percentage"/>
    </div>
    <div class="wk-upload-cell__footer">
      <el-button :icon="handleIcon" @click="cancelRequest"/>
    </div>
  </flexbox>
</template>

<script setup>
import {crmFileSaveAPI} from '/src/api/common.js'
import {getFileTypeIcon, fileSize} from '/src/utils/index.js'
import {ref, watch, computed, getCurrentInstance} from "vue"

// 引入消息总线
const cxt = getCurrentInstance() //相当于Vue2中的this
const bus = cxt.appContext.config.globalProperties.$bus

defineOptions({
  name: 'WkUploadCell',
})

const props = defineProps({
  file: {
    type: File,
    required: true
  },
  index: Number,
  request: Function,
  complete: {
    type: Boolean,
    default: false
  },
  params: Object
})
const emits = defineEmits(['cancelTokenChange', 'completed', 'error', 'delete'])

const percentage = ref(0)
const cancel = ref(null)


const handleIcon = computed(() => {
  return props.complete ? 'el-icon-check' : 'el-icon-close'
})

const fileIcon = computed(() => {
  return getFileTypeIcon(props.file)
})

const fileSizeLocal = computed(() => {
  return `（${fileSize(props.file.size)}）`
})


const uploadFile = () => {
  const request = props.request ? props.request : crmFileSaveAPI
  const params = props.params ? props.params : {}
  params.file = props.file

  const CancelToken = axios.CancelToken
  console.log("CancelToken", CancelToken)

  const self = cxt
  const config = {
    onUploadProgress: progressEvent => {
      const percentage = (progressEvent.loaded / progressEvent.total * 100 | 0)
      percentage.value = percentage
    },
    cancelToken: new CancelToken(function executor(c) {
      self.cancel = c
      emits('cancelTokenChange', c, self.index)
    })
  }
  request(params, config).then(res => {
    emits('completed', props.index, res)
  }).catch(() => {
    emits('error', props.index)
  })
}
watch(() => props.file, () => {
  if (props.file && !props.complete && percentage.value == 0) {
    uploadFile()
  }
}, {
  immediate: true
})

const cancelRequest = () => {
  if (!props.complete) {
    cancel()
    emits('delete', props.index)
  }
}


</script>

<script>

import axios from 'axios'

export default {

  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {
  },

  beforeDestroy() {
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.wk-upload-cell {
  border-radius: 4px;
  background-color: #F0F0F0;
  padding: 8px 15px;
  font-size: 12px;

  &__header {
    width: 17px;
    height: 20px;
    margin-right: 15px;
    flex-shrink: 0;
  }

  &__body {
    flex: 1;
    width: 0;

    .el-progress {
      margin-top: 8px;
    }
  }

  &__footer {
    flex-shrink: 0;
    margin-left: 10px;

    .el-button {
      border: none;
      outline: none;
      background: transparent;
      font-weight: bold;
      padding: 0;

      :deep(i) {
        font-size: 15px;
        font-weight: bold;
      }
    }
  }
}
</style>
